<template>
    <div class="favorite-bg">
      <h2 style="margin-bottom:24px;">我的收藏</h2>
      <el-row :gutter="32">
        <el-col v-for="item in favorites" :key="item.id" :xs="24" :sm="12" :md="8" :lg="6">
          <el-card class="product-card" shadow="hover" @click="goDetail(item.product.id)">
            <img :src="'http://127.0.0.1:8000/'+item.product.cover_image" class="product-img" />
            <div class="product-info">
              <h3 class="product-title">{{ item.product.name }}</h3>
              <p class="product-desc">{{ item.product.short_desc }}</p>
              <div class="product-price-row">
                <span class="price">￥{{ item.product.price }}</span>
                <span class="original">￥{{ item.product.original_price }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-empty v-if="!favorites.length" description="暂无收藏" />
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import request from '@/utils/request'
  import { useUserStore } from '../stores/user'
  
  const favorites = ref([])
  const router = useRouter()
  const userStore = useUserStore()
  
  const goDetail = id => router.push(`/shop/${id}`)
  
  onMounted(async () => {
    if (!userStore.userid) return
    const res = await request.get('http://127.0.0.1:8000/shop/favorite/list/', {
      params: { userid: userStore.userid }
    })
    favorites.value = res.data.favorites || []
  })
  </script>
  
  <style scoped>
  .favorite-bg {
    min-height: 100vh;
    background: #f8fafc;
    padding: 32px 5vw;
  }
  .product-card {
    margin-bottom: 24px;
    cursor: pointer;
  }
  .product-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
    background: #f5f7fa;
  }
  .product-info {
    padding: 12px 0 0 0;
  }
  .product-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #222;
  }
  .product-desc {
    color: #888;
    font-size: 1rem;
    margin-bottom: 8px;
  }
  .product-price-row {
    color: #f56c6c;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  .price {
    margin-right: 12px;
    font-size: 1.1rem;
  }
  .original {
    color: #bbb;
    text-decoration: line-through;
    font-size: 0.9rem;
  }
  </style> 